<template>
  <view class="container">
    <!-- 今日任务 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">今日任务</text>
        <text class="section-subtitle">完成{{ todayTasks.filter(t => t.completed).length }}/{{ todayTasks.length }}个任务</text>
      </view>
      
      <view class="tasks-list">
        <view
          v-for="task in todayTasks"
          :key="task.id"
          class="task-card"
          :class="{ completed: task.completed }"
          @tap="handleTaskClick(task)"
        >
          <view class="task-left">
            <view class="task-icon">
              <u-icon :name="task.icon" :color="task.completed ? '#999' : '#ff6b81'" size="40" />
            </view>
            <view class="task-info">
              <text class="task-name">{{ task.name }}</text>
              <text class="task-desc">{{ task.description }}</text>
            </view>
          </view>
          <view class="task-right">
            <view class="task-reward">
              <text class="reward-points">+{{ task.points }}</text>
              <u-icon name="heart-fill" color="#ff6b81" size="14" />
            </view>
            <button
              class="task-btn"
              :class="{ completed: task.completed }"
              :disabled="task.completed"
              @tap.stop="completeTask(task)"
            >
              {{ task.completed ? '已完成' : '去完成' }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 情侣任务 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">情侣任务</text>
        <text class="section-subtitle">增进感情的特别任务</text>
      </view>
      
      <view class="tasks-list">
        <view
          v-for="task in coupleTasks"
          :key="task.id"
          class="task-card"
          :class="{ completed: task.completed }"
          @tap="handleTaskClick(task)"
        >
          <view class="task-left">
            <view class="task-icon">
              <u-icon :name="task.icon" :color="task.completed ? '#999' : '#ff6b81'" size="40" />
            </view>
            <view class="task-info">
              <text class="task-name">{{ task.name }}</text>
              <text class="task-desc">{{ task.description }}</text>
            </view>
          </view>
          <view class="task-right">
            <view class="task-reward">
              <text class="reward-points">+{{ task.points }}</text>
              <u-icon name="heart-fill" color="#ff6b81" size="14" />
            </view>
            <button
              class="task-btn"
              :class="{ completed: task.completed }"
              :disabled="task.completed"
              @tap.stop="completeTask(task)"
            >
              {{ task.completed ? '已完成' : '去完成' }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义任务 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">自定义任务</text>
        <text class="add-task" @tap="showAddTaskModal = true">+ 添加</text>
      </view>
      
      <view v-if="customTasks.length > 0" class="tasks-list">
        <view
          v-for="task in customTasks"
          :key="task.id"
          class="task-card"
          :class="{ completed: task.completed }"
          @tap="handleTaskClick(task)"
        >
          <view class="task-left">
            <view class="task-icon">
              <u-icon :name="task.icon" :color="task.completed ? '#999' : '#ff6b81'" size="40" />
            </view>
            <view class="task-info">
              <text class="task-name">{{ task.name }}</text>
              <text class="task-desc">{{ task.description }}</text>
            </view>
          </view>
          <view class="task-right">
            <view class="task-reward">
              <text class="reward-points">+{{ task.points }}</text>
              <u-icon name="heart-fill" color="#ff6b81" size="14" />
            </view>
            <view class="task-actions">
              <button
                class="task-btn"
                :class="{ completed: task.completed }"
                :disabled="task.completed"
                @tap.stop="completeTask(task)"
              >
                {{ task.completed ? '已完成' : '去完成' }}
              </button>
              <button
                class="delete-btn"
                @tap.stop="deleteTask(task)"
              >
                <u-icon name="trash" color="#ff6b81" size="20" />
              </button>
            </view>
          </view>
        </view>
      </view>
      
      <view v-else class="empty-custom">
        <u-empty
          mode="list"
          text="暂无自定义任务"
          icon="http://cdn.uviewui.com/uview/empty/list.png"
        />
      </view>
    </view>

    <!-- 添加任务弹窗 -->
    <u-popup v-model="showAddTaskModal" mode="center" border-radius="20">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">添加自定义任务</text>
          <u-icon name="close" color="#999" size="24" @tap="showAddTaskModal = false" />
        </view>
        
        <view class="modal-form">
          <u-form ref="taskForm" :model="newTask">
            <u-form-item label="任务名称" prop="name">
              <u-input v-model="newTask.name" placeholder="请输入任务名称" />
            </u-form-item>
            
            <u-form-item label="任务描述" prop="description">
              <u-input v-model="newTask.description" placeholder="请输入任务描述" />
            </u-form-item>
            
            <u-form-item label="积分奖励" prop="points">
              <u-input v-model="newTask.points" type="number" placeholder="请输入积分奖励" />
            </u-form-item>
          </u-form>
        </view>
        
        <view class="modal-actions">
          <custom-button
            type="secondary"
            text="取消"
            @click="showAddTaskModal = false"
          />
          <custom-button
            type="primary"
            text="添加"
            @click="addCustomTask"
          />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

// 数据
const showAddTaskModal = ref(false)
const newTask = ref({
  name: '',
  description: '',
  points: 10
})

// 任务数据
const todayTasks = ref([
  {
    id: 1,
    name: '早安吻',
    description: '给伴侣一个温暖的早安吻',
    points: 10,
    icon: 'heart',
    completed: false
  },
  {
    id: 2,
    name: '洗碗小能手',
    description: '主动承担今天的洗碗任务',
    points: 20,
    icon: 'setting',
    completed: false
  },
  {
    id: 3,
    name: '浪漫晚餐',
    description: '一起准备一顿浪漫的晚餐',
    points: 30,
    icon: 'home',
    completed: true
  },
  {
    id: 4,
    name: '每日分享',
    description: '分享今天最开心的事情',
    points: 15,
    icon: 'chat',
    completed: false
  }
])

const coupleTasks = ref([
  {
    id: 5,
    name: '甜蜜约会',
    description: '安排一次特别的约会',
    points: 50,
    icon: 'calendar',
    completed: false
  },
  {
    id: 6,
    name: '爱心早餐',
    description: '为伴侣准备爱心早餐',
    points: 25,
    icon: 'home',
    completed: false
  },
  {
    id: 7,
    name: '深情告白',
    description: '向伴侣表达爱意',
    points: 40,
    icon: 'heart',
    completed: true
  }
])

const customTasks = ref([])

// 方法
const handleTaskClick = (task) => {
  if (!task.completed) {
    uni.showModal({
      title: task.name,
      content: task.description,
      showCancel: false,
      confirmText: '知道了'
    })
  }
}

const completeTask = (task) => {
  if (!task.completed) {
    uni.showModal({
      title: '完成任务',
      content: `确定要完成"${task.name}"任务吗？`,
      success: (res) => {
        if (res.confirm) {
          task.completed = true
          userStore.setPoints(userStore.totalPoints + task.points)
          uni.showToast({
            title: `获得 ${task.points} 积分`,
            icon: 'success'
          })
        }
      }
    })
  }
}

const addCustomTask = () => {
  if (!newTask.value.name || !newTask.value.description) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  const task = {
    id: Date.now(),
    ...newTask.value,
    icon: 'edit-pen',
    completed: false
  }
  
  customTasks.value.unshift(task)
  newTask.value = { name: '', description: '', points: 10 }
  showAddTaskModal.value = false
  
  uni.showToast({
    title: '任务添加成功',
    icon: 'success'
  })
}

const deleteTask = (task) => {
  uni.showModal({
    title: '删除任务',
    content: '确定要删除这个任务吗？',
    success: (res) => {
      if (res.confirm) {
        const index = customTasks.value.findIndex(t => t.id === task.id)
        if (index > -1) {
          customTasks.value.splice(index, 1)
          uni.showToast({
            title: '任务已删除',
            icon: 'success'
          })
        }
      }
    }
  })
}

onMounted(() => {
  // 可以加载保存的自定义任务
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
    
    .section-subtitle {
      font-size: 24rpx;
      color: #666;
}
    
    .add-task {
      font-size: 28rpx;
      color: #ff6b81;
      font-weight: bold;
}
  }
}

.tasks-list {
  .task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    
    &.completed {
      opacity: 0.7;
}
    
    .task-left {
      display: flex;
      align-items: center;
      flex: 1;
      
      .task-icon {
        margin-right: 20rpx;
}
      
      .task-info {
        .task-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          display: block;
          margin-bottom: 4rpx;
}
        
        .task-desc {
          font-size: 24rpx;
          color: #666;
}
      }
    }
    
    .task-right {
      display: flex;
      align-items: center;
      
      .task-reward {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        
        .reward-points {
          font-size: 28rpx;
          font-weight: bold;
          color: #ff6b81;
          margin-right: 4rpx;
}
      }
      
      .task-actions {
        display: flex;
        align-items: center;
         margin-right: 10rpx; &:last-child { margin-right: 0; }
      }
      
      .task-btn {
        background: #ff6b81;
        color: #fff;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
        
        &.completed {
          background: #ccc;
}
      }
      
      .delete-btn {
        width: 40rpx;
        height: 40rpx;
        background: #ff6b81;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
}
    }
  }
}

.empty-custom {
  padding: 100rpx 0;
  text-align: center;
}

.modal-content {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
  }
  
  .modal-form {
    margin-bottom: 30rpx;
}
  
  .modal-actions {
    display: flex;
    justify-content: space-between;
     margin-right: 20rpx; &:last-child { margin-right: 0; }
  }
}
</style>